<template>
  <div class="main">
     <div class="head_div"></div>
     <div class="logo_div">
       <img src="../assets/logo1.png" />
       <h1>卡拉扬大囧智能书包数据平台</h1>
     </div>
     <div class="user_login">
       <UserLogin></UserLogin>
     </div>
     <div class="foot_div">
       <h2>@深圳市开鸿数字发展有限公司</h2>
       <h2>@浙江卡拉扬集团有限公司</h2>
     </div>
  </div>  
</template>

<script setup>
import UserLogin from "./UserLogin";
</script>

<style scoped>
.main{
  width: 100%;
  height: calc(100vh);
  background:url(../assets/aboutbg.png) repeat;

  /*取出点击出现半透明的灰色背景*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight:rgba(0,0,0,0);
}

.foot_div{
  display: flex;
  justify-content:center;
  height: 80px;
  line-height: 80px;
}

.foot_div h2{
   margin: 0px 10px 0px 10px;
   color: #605144;
}

.head_div{
  height: 40px;
  width: 100%;
  background-color:#605144; 
}

.logo_div{
  height: 60px;
  width: 100%;
  background-color: #fff;
  padding: 15px  25%  0px 25%;
}

.logo_div img{
  float: left;
  margin-right: 60px;
}

.logo_div h1{
  font-size: 28px;
  color: #605144;
  font-weight: 500;
  letter-spacing:5px;
}

.user_login{
  width: 50%;
  height: 75%;
  background-color: #fff;
  margin-left: 25%;
  margin-top: 30px;
  box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content:center;
}


</style>